<template>
  <div class="animated fadeIn">

          <Row>
        <Col :md="24" >
           



<div >


        <div id="container" style="margin-bottom:10px;">


   <Button type="primary" size="large"  icon="ios-cloud-upload-outline" id='pickfiles' @click="qiniu_upload" style="padding-bottom:5px;">上传文件</Button>
         <Progress :percent="progresscount" :status="progresstatus" style="width=90%;vertical-align:middle" v-if="progresshow">
                <Icon type="checkmark-circled" v-if="progresscount==100"></Icon>
                <span v-if="progresscount===100">上传成功</span>
                <Icon type="close-circled" v-if="progresstatus==='wrong'"></Icon>
                <span v-if="progresstatus==='wrong'">上传失败</span>
                <span style="position:absolute;left:50%;top:-5px;" v-if="progresscount!==0&&progresscount!=100">{{progressspeed}}</span>
              </Progress>
        </div>
           
            <div style="position:relative;">
              
          
                
                 <Table  :columns="columns7" :data="page_video_list" ref="table"></Table>

                  <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                            align-items: center;
                            justify-content: center;background: rgba(210, 216, 222, 0.5);" v-if="list_loadding">
                   <Spin size="large"></Spin>
                   <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
                </div>
            </div>

                   <Page :total="this.video_list.length" show-total @on-change="setInitPage" style="text-align:right;margin-top:50px"></Page>

   <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
    <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
</div>
            <div style="" class="doc-content">
                <h5>表格综合实例</h5>

        <p>轻松完成业务需求，再也不用被产品催了</p>
            </div>
             
        </Col>


        <Col :md="12">
           
 


        </Col>








    </Row> 


</div>
</template>

<script>
   import expandRow from './table-expand.vue';

 var vue;
 var uploader;
  function getVideoName(video_name){
      var video_name='';
      var img_ext_list=[".jpg",".png",".jpeg"];
      img_ext_list.forEach(function(e){
          if(video_name.indexOf(e)!==-1)
          {
            let point_index=video_name.indexOf(e);
          let leaf_index=video_name.lastIndexOf('/',point_index);
           let line_index=video_name.lastIndexOf('_',point_index);
             video_name=video_name.substring(line_index+1);
           return video_name;

          }
      });


        var video_ext_list=[".mp4"];
    video_ext_list.forEach(function(e){
        if(video_name.indexOf(e)!==-1)
        {
          let point_index=video_name.indexOf(e);
        let leaf_index=video_name.lastIndexOf('/',point_index);
          let line_index=video_name.lastIndexOf('_',point_index);
           video_name=video_name.substring(line_index+1);
           return video_name;
        }
    });
           return video_name;

  };

  function getVideoDuration(video_duration_before){
   let video_duration=parseInt(video_duration_before);
              if(video_duration<=60){
                if(video_duration<10)
                  video_duration="00:00:0"+video_duration;
                else
                  video_duration="00:00:"+video_duration;

              }
              else if(video_duration>60&&video_duration<=60*60){
                  const minute=Math.floor(video_duration/60);
                  const s=Math.floor(video_duration%60);
                  if(minute<10)
                    video_duration="00:0"+minute;
                  else 
                    video_duration="00:"+minute;

                  
                  if(s<10)
                  video_duration=video_duration+":0"+s;

                else
                  video_duration=video_duration+":"+s;

              }
              else if (video_duration>60*60&&video_duration<60*60*60){
                  const hour=Math.floor(video_duration/3600);
                 
                  const minute=Math.floor((video_duration%3600)/60);
                    const s=Math.floor((video_duration%3600)%60);
                   if(hour<10)
                    video_duration="0"+hour;
                  else
                    video_duration=hour+'';

                   if(minute<10)
                    video_duration=video_duration+":0"+minute;
                  else 
                    video_duration=video_duration+":"+minute;
                
                   if(s<10)
                    video_duration=video_duration+":0"+s;
                  else 
                    video_duration=video_duration+":"+s;


              }

            return video_duration;
  }
  function getVideoSize(video_size){
                      if(video_size<1024)
                                  video_size=Math.round(video_size*100)/100+" B";
                             else  if(video_size>=1024&&video_size<1024*1024)
                                  video_size=Math.round(video_size/1024*100)/100+" Kb";
                            else if(video_size>=1024*1024&&video_size<1024*1024*1024)
                                 video_size=Math.round(video_size/(1024*1024)*100)/100+" Mb";

                               return video_size;
  }

  function qiniuInit(vue){

  uploader = Qiniu.uploader({
      runtimes: 'html5,flash,html4',      // 上传模式，依次退化
      browse_button: 'pickfiles',         // 上传选择的点选按钮，必需
      uptoken_func: function(){    // 在需要获取uptoken时，该方法会被调用
         // return "123"; 
      },
      get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
      // downtoken_url: '/downtoken',
      // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
      unique_names: false,              // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
      save_key: false,                  // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
      domain: 'http://qiniu-plupload.qiniudn.com/',     // bucket域名，下载资源时用到，必需
      container: 'container',             // 上传区域DOM ID，默认是browser_button的父元素
      max_file_size: '1024mb',             // 最大文件体积限制
      flash_swf_url: 'static/bower_components/plupload/js/Moxie.swf',  //引入flash，相对路径
      max_retries: 0,                     // 上传失败最大重试次数
      dragdrop: true,                     // 开启可拖曳上传
      drop_element: 'container',          // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
      chunk_size: '10mb',                  // 分块上传时，每块的体积
      auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
      multi_selection: true,
      filters : {
          max_file_size : '1000mb',
          prevent_duplicates: false,
          // Specify what files to browse for
          mime_types: [
              {title : "Video files", extensions : "mp4"}, // 限定flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4后缀格式上传
              {title : "Image files", extensions : "jpg,png,jpeg"}, // 限定jpg,gif,png后缀上传
          ]
      },
      init: {
          'FilesAdded': function(up, files) {

              plupload.each(files, function(file) {
                vue.progresshow=true;
              });
          },
          'BeforeUpload': function(up, file) {

                 vue.progresscount=10;
                 vue.progresstatus="active";


                  vue.progressspeed="1.5 Mb/s";

               var interval=setInterval(function(){
               	if(vue.progresscount===40){
		                clearInterval(interval)

               		  vue.$Notice.success({title:'上传成功'});

		                setTimeout(function(){
		                   vue.progressspeed=0;
              			   vue.progresstatus="wrong";

		                  	  vue.$Message.error('上传失败');
		               		 setTimeout(function(){
		               		 vue.progresscount=0;

		              				  vue.progresshow=false;


								           var obj=	{
						              		task_status:0,
						              		timestamp:"2017-08-10 17:03:54",
						              		video_duration:"11.121667",
						              		video_size:1732410,
											video_name:"http://otl6ypoog.bkt.clouddn.com/Objectstoarge/videos/2017-08-10/33337_p.mp4",
						              	};

						              	vue.video_list.push(obj);
						              	vue.setInitPage(1);
		            			  },4000)
		               		},1000);
               	}else{
               		 vue.progresscount+=2;

               	}
              },100);

          },
          'UploadProgress': function(up, file) {
          },
          'FileUploaded': function(up, file, info) {
          },
          'Error': function(up, err, errTip) {
                 //上传出错时，处理相关的事情
                

          },
          'UploadComplete': function() {
                 //队列文件处理完毕后，处理相关的事情
          },
          'Key': function(up, file) {
              // return key
          }
      }
  });
}
export default {
     components: { expandRow },

  name: 'buttons',
  data () {
            return {
              progresshow:false,
              progresscount:0,
              progresstatus:'active',
              progressspeed:0,
              video_list:[
              	{
              		task_status:0,
              		timestamp:"2017-08-10 17:03:54",
              		video_duration:"11s",
              		video_size:1732410,
				        	video_name:"p.mp4",
              	},
              	{
              		task_status:1,
              		timestamp:"2017-08-10 17:03:54",
              		video_duration:"11s",
              		video_size:1732410,
				        	video_name:"p.mp4",
              	},
                {
                  task_status:1,
                  timestamp:"2017-08-10 17:03:54",
                  video_duration:"11s",
                  video_size:1732410,
                  video_name:"p.mp4",
                },
                {
                  task_status:0,
                  timestamp:"2017-08-10 17:03:54",
                  video_duration:"11s",
                  video_size:1732410,
                  video_name:"p.mp4",
                },
                {
                  task_status:1,
                  timestamp:"2017-08-10 17:03:54",
                  video_duration:"11s",
                  video_size:1732410,
                  video_name:"p.mp4",
                },
                {
                  task_status:0,
                  timestamp:"2017-08-10 17:03:54",
                  video_duration:"11s",
                  video_size:1732410,
                  video_name:"p.mp4",
                },
              ],
              pageindex:1,
              page_video_list:[],
              lodding:false,
              list_loadding:false,
                columns7: [
                         {
                              type: 'expand',
                             width:"30",
                              ellipsis:'true',

                              render: (h, params) => {
                                  return h(expandRow, {
                                      props: {
                                          row: params.row
                                      }
                                  })
                              }
                          },
                          {
                              title: '视频名称',
                              key: 'video_name',
                              ellipsis:'true',
                          },
                          {
                                 title: '上传时间',
                              ellipsis:'true',
                                key: 'timestamp',
                             
                          },

                           {
                              title: '时长',
                              ellipsis:'true',
                              key:'video_duration',
                          },
                          {
                              title: '大小',
                              ellipsis:'true',
                              key:'video_size',
                             filters: [
                            {
                                label: '大于10M',
                                value: 1
                            },
                            {
                                label: '小于10M',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.video_size>1024*1024*1024*10;
                            } else if (value === 2) {
                                return row.video_size<1024*1024*10;
                            }
                        }
                          },
                           {
                              title: '状态',
                              ellipsis:'true',
                              filters: [
                            {
                                label: '处理完成',
                                value: 1
                            },
                            {
                                label: '正在处理',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.task_status===1;
                            } else if (value === 2) {
                                return row.task_status===0;
                           }
                        },

                              render: (h, params) => {
                                const task_status=parseInt(params.row.task_status);

                                if(task_status===0)
                                    return h('div', [
                                  h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: "blue"
                                }
                            }, "正在处理"),
                                     ]);

                                else if(task_status===1)
                                    return h('div', [
                                      
                                          h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: "green"
                                }
                            }, "处理完成"),
                                     ]);
                            }
                          },
                         
                          {
                              title: '操作',
                              key: 'action',
                              align: 'center',
                              ellipsis:'true',

                              render: (h, params) => {
                                const task_status=parseInt(params.row.task_status);
                                if(task_status===0)
                                {
                                  return h('div', [
                                    h('Tooltip',{
                                          props: {
                                              content: '还未分析完成，暂时不能查看',
                                          },
                                    },[
                                    h('Button', {
                                          props: {
                                              type: 'primary',
                                              size: 'small',
                                              loading:true,
                                          },
                                          style: {
                                              marginRight: '5px'
                                          },
                                      }, '处理中')]),
                                      h('Button', {
                                          props: {
                                              type: 'error',
                                              size: 'small',
                                              disabled:true,
                                          },
                                          on: {
                                              click: () => {
                                                  this.remove(params.index)
                                              }
                                          }
                                      }, '删除')
                                    
                                      
                                  ]);
                                }
                                else if(task_status===1){
                                  return h('div', [
                                      h('Button', {
                                          props: {
                                              type: 'primary',
                                              size: 'small',
                                          },
                                          style: {
                                              marginRight: '5px'
                                          },
                                          on: {
                                              click: () => {
                                          this.$router.push({path:'/tabledetail/'+(((this.pageindex-1)*10)+params.index) })

                                              }
                                          },
                                      }, '查看结果'),
                                      h('Button', {
                                          props: {
                                              type: 'error',
                                              size: 'small',
                                          },
                                          on: {
                                              click: () => {
                                                  this.remove(params.index)
                                              }
                                          }
                                      }, '删除')
                                  ]);
                              }
                                }//render
                            },//{
                ],//cloumn
            }//return
        },//data
        methods: {
		            remove (index) {
		                this.video_list.splice(index, 1);
		            },
		        qiniu_upload(){
		          uploader.start();
		        },
		        setInitPage(page)
		        {

		          this.page_video_list=[];
		          this.pageindex=page;
		            let video_list=this.video_list;
		          for(let i=(page-1)*10;i<(page-1)*10+10;i++)
		          {


		              if(i<video_list.length)
		              {

		                 this.page_video_list.push(this.video_list[i]);

		              }
		          }
		       },
            exportData (type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: '原始数据',
                        columns: this.columns7,
                        data: this.video_list
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: '排序和过滤后的数据',
                        original: false
                    });
                } 
            }        
     },
     mounted(){
          const vue=this;

            this.list_loadding=true;
            setTimeout(function(){
          		  vue.list_loadding=false;

            },2000)
           qiniuInit(vue);//初始化七牛数据
           this.setInitPage(1);
        },
}


</script>


<style type="text/css" scoped>
.ivu-tag-dot{
	border: none!important;
}
tr.ivu-table-row-hover td .ivu-tag-dot{
	background-color: #ebf7ff!important;
}

 .demo-i-circle-custom h1{
            color: #3f414d;
            font-size: 10px;
            font-weight: normal;
        }
        .demo-i-circle-custom p{
            color: #657180;
            font-size: 8px;
            margin: 5px 0 2px;
        }
        .demo-i-circle-custom span{
            display: block;
            padding-top: 15px;
            color: #657180;
            font-size: 10px;}
           .demo-i-circle-custom span :before{
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #e0e3e6;
                position: relative;
                top: -20px;
            };
        .demo-i-circle-custom span i{
            font-style: normal;
            color: #3f414d;
        }
/*wz-btn wz-btn-primary wz-btn-small wz-btn-loading*/

        .ivu-btn.ivu-btn-primary.ivu-btn-small:not(.ivu-btn-loading ){
          padding :2px 10px!important;
        }
          td.ivu-table-expanded-cell{
        background-color: white!important;

    }
</style>



